<template>
<div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="color: #20b2aa">今日工作量</span>
            </div>
            <ul class="frist">
              <li>样本采集：0 个</li>
              <li>DNA提取：0 个 </li>
              <li>样本检测：0 个</li>
            </ul>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="color: #20b2aa">今日检测结果</span>
            </div>
            <ul class="two">
              <li>smn_17阳性：0 个</li>
              <li>smn_18阳性：0 个 </li>
              <li>检测结果阳性：0 个</li>
            </ul>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="color: #20b2aa">冰箱数量：7 台</span>
            </div>
            <ul>
              <li>冻存架个数：90 个</li>
              <li>冻存盒个数：1531 个</li>
              <li>冻存盒总孔数：151564 个</li>
            </ul>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="color: #20b2aa">样本总数量：12 个</span>
            </div>
            <ul>
              <li>容器占用率：0 %</li>
              <li>样本阳性率：0 % </li>
              <li>今日阳性率：0 %</li>
            </ul>
          </el-card>
        </div>
      </el-col>
    </el-row>
  <el-card>
  <!--  1.创建dom节点-->
  <div ref="MubanRef" class="homeclass">
  </div>
  </el-card>
    <LeftEcharts></LeftEcharts>
    <rightEcharts></rightEcharts>

</div>
</template>

<script>
// 2引入echarts
import * as echarts from 'echarts'
import LeftEcharts from '@/views/home/LeftEcharts'
import RightEcharts from '@/views/home/RightEcharts'
// @ is an alias to /src
export default {
  name: 'Home',
  components: {
    LeftEcharts,
    RightEcharts
  },
  data () {
    return {
      myChart: null
    }
  },
  mounted () {
    this.initCharts()
  },
  methods: {
    initCharts () {
      this.myChart = echarts.init(this.$refs.MubanRef)
      this.myChart.setOption({
        title: {
          text: '本周样品动态储存图'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
        },
        legend: {
          data: ['外周血', '白细胞', '红细胞', '血浆', '血清']
        },
        yAxis: {
          type: 'value'
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            stack: 'Total',
            name: '',
            type: 'line',
            data: [0, 0, 0, 0, 2, 4, 0]
          },
          {
            stack: 'Total',
            name: '外周血',
            type: 'line',
            data: [0, 0, 0, 0, 3, 0, 0]
          },
          {
            stack: 'Total',
            name: '白细胞',
            type: 'line',
            data: [0, 0, 0, 0, 0, 1, 0]
          },
          {
            stack: 'Total',
            name: '红细胞',
            type: 'line',
            data: [0, 0, 0, 0, 0, 1, 0]
          },
          {
            stack: 'Total',
            name: '血浆',
            type: 'line',
            data: [0, 0, 0, 0, 1, 0, 0]
          },
          {
            stack: 'Total',
            name: '血清',
            type: 'line',
            data: [0, 0, 0, 0, 1, 1, 0]
          }
        ]
      })
    }

  }

}
</script>
<style scoped>
.box-card {
  width: 300px;
  height: 220px;
  padding: 0 5px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  display: inline-block;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  transition: .3s;
  margin-top: 10px !important;
}
.box-card ul li{
  padding: 10px 0;
}
.frist  li{
  color: #32cd32;
}
.two li{
  color: #ffa07a;
}
.el-row{
  margin-right: 0!important;
}
.homeclass{
  width: 1175px;
  height: 400px;

}

</style>
